Rapid HTML
After the last chapter we have a good idea of our message is and what our finished web pages are going to look like. Now we need to start developing those pages, our experience and our knowledge at the same time.
If you are new to HTML and are looking for a structured way of gaining the knowledge you need I would suggest this approach.
1. Spend a little time every day on the web looking for things you like. It's important to do this so that you can develop your own style. Start off looking like you would like to finish, it's a real pain having to rework a web site because you don't like the way it looks.
2. Get yourself a copy of the Quick Guide to HTML The HTML Quick Reference V 1.3
3. Find yourself an Editor that you feel you could work with.
4. Go to one of the tutorial sites and start learning the basic's of HTML BRUCE's Web Page Help!
5. Take one of the more advanced tutorials
6. Get your self some free web space
7. Down load your graphics
8. Write and test your code
Power Tags
I don't want to start an HTML tutorial as I think there are many fine tutorials already in existence. I have set up number of links to some of the best of them at the end of this section. However I do want to spend a little time on a few of what I call the "Power Tags". which don't seem to get the attention they deserve in most tutorials. So here goes!
<FONT> </FONT> This power tag gives you a lot of flexibility and control over how text is displayed. It has three "attributes" that let you quickly set and adjust the "Size" of the text, the "color"(sorry about the spelling!!) and the "Font".

TEXT SIZE
First lets look at adjusting the text size attribute.The Text size can be set from 1 to 7, with 7 being the largest, and 3 being the default size.
<FONT SIZE=3>TEXT</FONT> Gives us TEXT
<FONT SIZE=7>TEXT</FONT> Gives us TEXT
Now one nice feature of the text size control is that we can increase or decrease it by using "+" or "-". the next examples use this method.
<FONT SIZE="-2">TEXT</FONT> Gives us...TEXT
<FONT SIZE="+3">TEXT</FONT> GIVES US...TEXT
<FONT SIZE="+2">TEXT</FONT> GIVES US..TEXT
Remember the "+" & "-" are larger and smaller than the normal setting of "3". This is a quick way to adjust the size of the text, for instance:
<FONT SIZE="6">T</TEXT><FONT SIZE="+2">EXT</TEXT> Would give usTEXT

TEXT COLOUR ATTRIBUTE
<FONT COLOR="#FF0000">TEXT</FONT>

Gives us...COLOUR TEXT
<FONT COLOR="#0000FF">TEXT</FONT> Gives us...COLOUR TEXT
<FONT COLOR="33FF00">TEXT</FONT> Gives us...COLOUR TEXT

TEXT FONT ATTRIBUTE
<FONT FACE="arial">TEXT</FONT> Gives us...TEXT
<FONT FACE="Courier">TEXT</FONT> Gives us...TEXT

PUTTING IT ALL TOGETHER
Combining the attributes:

<FONT SIZE="+2" COLOR="Red" FACE="arial"#FF0000>TEXT</FONT>

 Would give us...TEXT

Power Tags

The anchor tag <a> <a/>.

<a> <a/> The anchor tag.
The tag in generally seen in this format:

<a href="http:\\sysman\sites.html">"My Favorite Sites"</a>

It's the same as the previous tag but I have added two pieces of information to it,

"http:\\sysman\sites.html" - this is the file that I want the link to go to, and

"My Favorite Sites" - this is the text that the user see's

Please don't use Click here, let the user know where the link points to, "My Favorite Sites" is a much better description.
There are a couple of points to note here as this tag sends more people to the wrong place than just about anything else on the Internet. The URL must be correct or the user will end up in the wrong place or receive a server error message. The quickest and surest way to get this bit right is to cut and Paste the URL directly out of your browser URL window directly into your code.

We don't have to just use text we can use any graphic, photograph or button. All we need to do is to add a little extra bit of code <a href="http:\\sysman\sites.html">< img src="greenbut.gif"<a> OK so we can link to other sites on the Internet so what else can we do with it?

A second key job for this tag is to help us to move around our own web site in two ways. Firstly we can use the tag like this:

<a href="sites.html">"My Favorite Site List "<a>

See the difference ? The internal part of the tag now looks for an HTML file called "sites.html" and it looks for it in our web site. The menu's at the bottom of most of my pages are done this way. I just set them up to point to the target html file and attach a little bit of text so that you know where it points to. The other use for the tag is within long documents.

Have you ever noticed that some of the longer html have at the top of them hypertext links to various points in the document - rather like an index.

There are two parts to the anchor tag when used this way The "href" specifies what the link goes to be it a file or an address. If we want it to jump to another location within the same document then we use the same tag but this time we set it up like this
<a href="#Anchor">"Power Tags Anchor"<a>
We need one more piece of information for this tag to be able to work - we need to mark the other end of the anchor. We do this using
<A NAME="Anchor"></A>
Here it is try it Power Tags Anchor
The "#Anchor" can be any name you choose but you must include the "#" before the name you are going to call it.
This technique is often used at the top of long documents and it allows you to jump to the section you want.

To be continued, so please call back .........soon!!



Last Modified: Tuesday, Dec 2, 1997, at 10:53 PM